<template>
	<view class="mainBg h100 container">
		<navbar title="我的余额">
			<navigator url="./list"> <text>明细 </text></navigator>
		</navbar>
		<view class="content">
			<view class="price">
				<text>{{userInfo.money}}</text> 缘
			</view>
			<view class="btn" @click="open">
				充值
			</view>
		</view>
		<view class="title">
			充值说明
		</view>
		<view class="text">
			1.余额用于购买课程，不可提现不可转让。 </view>
		<view class="text"> 2.仅支持支付宝微信，若有问题联系客服。 </view>
		<uni-popup ref="popup">
			<view class="popup-content">
				<view class="popup-title">
					余额充值
				</view>
				<view class="text">
					充值金额
				</view>
				<view class="list">
					<view class="col" v-for="item,index in moneyList" :key="index" @click="selectMoney(item)">
						<view :class="item == money ? `item active` : `item`">
							￥{{item}}
						</view>
					</view>
					<uni-easyinput type="number" v-model="diy_money" placeholder="自定义充值金额" />
				</view>
				<view class="text">
					充值方式
				</view>
				<view class="list payType">
					<view class="col" v-for="item,index in payTypeList" :key="index" @click="selectPay(item)">
						<view :class="item.value == payType ? `item active` : `item`">
							{{item.label}}
						</view>
					</view>
				</view>
				<view class="text desc">
					充值说明：1 元= 1 缘
				</view>
				<view class="btn" @click="recharge">
					充值
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				money:50,
				diy_money:'',
				payType:'wxpay',
				moneyList:[50,100,200,300,500,1000],
				payTypeList:[
					{label:'微信支付',value:'wxpay'},
					{label:'支付宝支付',value:'alipay'},
				],
				orderId:'',
				pollingTimer:null,
			}
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			open() {
				this.$refs.popup.open()
			},
			getInfo() {
				this.$post("/user/info").then(res => {
					this.userInfo = res.data.userInfo
				})
			},
			selectMoney(item) {
				if(this.money == item)
				{
					this.money = 0
				}else{
					this.money = item
				}
				
			},
			selectPay(item){
				this.payType = item.value
			},
			recharge(){
				if(this.diy_money)
				{
					 const reg = /^[1-9]\d*$/;
					  if (!reg.test(this.diy_money)) {
						this.$toast("金额输入错误")
						return
					  }
					  this.money = this.diy_money
				}
				
				if(this.money == 0)
				{
					this.$toast("请输入充值金额")
					return
				}
				
				this.$post("/recharge/place_order",{money:this.money,payType:this.payType}).then(res => {
					// console.log(res)
					if(res.code == 200)
					{
						this.orderId = res.data.orderId
						uni.showLoading({
							title:"充值中",
							mask:true,
						})
						this.startOrderPolling(this.orderId)
					}else{
						this.$toast(res.msg)
					}
					
				})
			},
			// 开始订单轮询
			  startOrderPolling(orderId) {
			    // 记录定时器ID
			    this.pollingTimer = setInterval(() => {
			      this.checkOrderStatus(orderId);
			    }, 3000); // 每3秒查询一次
			  },
			  // 停止订单轮询
			    stopOrderPolling() {
			      if (this.pollingTimer) {
			        clearInterval(this.pollingTimer);
			        this.pollingTimer = null;
			      }
				  // 手动关闭加载提示
				        uni.hideLoading();
			    },
			checkOrderStatus(orderId){
				this.$post("/recharge/query_order",{orderId:orderId}).then(res => {
					// console.log(res)
					this.$refs.popup.close()
					if(res.code == 200)
					{
						let orderStatus = res.data.orderStatus
						if(orderStatus == "1" || orderStatus == "2")
						{
							this.stopOrderPolling();
						}
					
						if(orderStatus == "1")
						{
							this.$toast("充值成功")
							this.getInfo()
						}else if(orderStatus == "2")
						{
							this.$toast("充值失败")
						}
					}else{
						console.log("查询订单失败",res.msg)
					}
					
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #35CBAD;
	}

	.navBar text {
		font-size: 28rpx;
	}

	.content {
		background-color: #fff;
		border: radius 10rpx;
		padding: 50rpx;
		text-align: center;
		font-weight: bold;

		.price {
			font-size: 56rpx;
			margin: 50rpx 0 80rpx;

			text {
				margin-right: 30rpx;
			}
		}

	}

	.btn {
		text-align: center;
		line-height: 80rpx;
		border-radius: 40px;
		background: linear-gradient(180deg, rgba(130, 234, 154, 1) 0%, rgba(81, 199, 108, 1) 100%);
		color: #fff;
		font-size: 32rpx;
		box-shadow: 0px 3px 6px 0px rgba(81, 199, 108, 0.4);
		border: 1px solid rgba(81, 199, 108, 1);
	}

	.title {
		font-size: 36rpx;
		margin: 50rpx 0 20rpx;
	}

	.text {
		font-size: 28rpx;
		color: #666;
		padding: 4rpx 0;
	}

	.popup-content {
		background-color: #fff;
		width: 70vw;
		border-radius: 8rpx;
		padding: 40rpx;
		font-size: 28rpx;

		.popup-title {
			font-weight: bold;
		}

		.text {
			font-size: 24rpx;
			color: #999;
			margin-top: 30rpx;
		}

		.list {
			display: flex;
			flex-wrap: wrap;
			margin: 0 -10rpx;

			.col {
				width: calc(100%/3);
				padding: 10rpx;

				.item {
					color: #999;
					text-align: center;
					line-height: 54rpx;
					border-radius: 8rpx;
					border: 2rpx solid #e2e2e2;
					background-color: #f7f7f7;
				}

				.active {
					color: $assist-color2;
					border-color: $assist-color2;
					background-color: #EFFFF2;
				}
			}
		}

		.payType .col {
			width: 50%;
		}

		.btn {
			margin-top: 50rpx;
		}
		.desc{
			color: #35CBAD;
		}
	}
</style>